<template>
    <div class="payment">
        <div class="time_down payment_group">
            请在
            <span class="red">半小时内</span>
            完成付款，否则系统自动取消订单
        </div>

        <van-cell-group class="payment_group">
            <van-cell title="订单编号" :value="order.orderInfo.orderSn"/>
            <van-cell title="实付金额">
                <span class="red">{{order.orderInfo.actualPrice *100 | yuan}}</span>
            </van-cell>
            <van-cell title="消耗模豆">
                <span class="red">{{order.orderInfo.modelPrice}}</span>
            </van-cell>
        </van-cell-group>

        <div class="pay_way_group">
            <div class="pay_way_title">选择支付方式</div>
            <van-radio-group v-model="payWay">
                <van-cell-group>
                    <!--          <van-cell>-->
                    <!--            <template slot="title">-->
                    <!--              <img src="../../../assets/images/ali_pay.png" alt="支付宝" width="82" height="29">-->
                    <!--            </template>-->
                    <!--            <van-radio name="ali"/>-->
                    <!--          </van-cell>-->
                    <van-cell>
                        <div style="display: flex; flex-direction: row; align-items: center;margin-bottom:10px;">
                            <div style="flex:1">
                                <img src="../../../assets/images/wx_pay.png" alt="微信支付" width="113" height="23">
                            </div>
                            <div>
                                <van-radio name="wx"/>
                            </div>
                        </div>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>

        <van-button class="pay_submit" @click="pay" type="primary" bottomAction>去支付</van-button>
    </div>
</template>

<script>
    import {Radio, RadioGroup, Dialog, Toast} from 'vant';
    import {orderDetail, orderPrepay} from '@/api/api';
    import _ from 'lodash';
    import wx from 'weixin-js-sdk'

    export default {
        name: 'payment',

        data() {
            return {
                payWay: 'wx',
                order: {
                    orderInfo: {},
                    orderGoods: [],
                },
                orderId: 0,
                payParams: {}
            };
        },
        created() {
            if (_.has(this.$route.params, 'orderId')) {
                this.orderId = this.$route.params.orderId;
                this.getOrder(this.orderId);
            }
        },
        methods: {
            getOrder(orderId) {
                orderDetail({orderId: orderId}).then(res => {
                    this.order = res.data.data;
                    console.log(this.order, '==========')
                });
            },
            pay() {
                // Dialog.alert({
                //   message: '你选择了' + (this.payWay === 'wx' ? '微信支付' : '支付宝支付')
                // }).then(() => {
                //
                //   this.$router.push({
                //     name: 'paymentStatus',
                //     params: {
                //       status: 'success'
                //     }
                //   });
                // });

                // 利用weixin-js-sdk调用微信支付
                orderPrepay({orderId: this.orderId}).then(res => {
                    this.payParams = res.data.data;
                    if (typeof WeixinJSBridge == "undefined") {
                        alert("请使用微信浏览器打开")
                    } else {
                        this.onBridgeReady(res.data.data)
                        // WeixinJSBridge.invoke('getBrandWCPayRequest', data, (res) => {
                        //     if (res.err_msg == "get_brand_wcpay_request:ok") {
                        //         alert("支付成功");
                        //     } else {
                        //         //这里支付失败和支付取消统一处理
                        //         alert("支付取消");
                        //     }
                        // })
                    }
                }).catch(error => {
                    Toast(error.data.errmsg);
                });
            },
            onBridgeReady(data) {
                console.log(data, 'ces')
                const that = this;
                wx.invoke('getBrandWCPayRequest', {
                    appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                    timeStamp: data.timeStamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    paySign: data.paySign,// 必填，签名，见附录1
                    signType: data.signType,// 必填，签名，见附录1
                    package: data.packageValue
                }, function (res) {
                    if (res.err_msg === 'get_brand_wcpay_request:ok') {
                        Dialog.alert({message: '支付成功'}).then(() => {
                            that.$router.push({ // 跳转到订单支付成功
                                name: 'paymentStatus',
                                params: {
                                    status: 'success'
                                }
                            });
                        })
                    } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                        Dialog.alert({message: '取消支付'})
                    } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
                        Dialog.alert({message: '网络异常，请重试'})
                    }
                })
            }
        },
        mounted() {
            orderPrepay({orderId: this.orderId}).then(res => {
                this.payParams = res.data.data;
                // console.log(this.payParams, 'payParams')
                // this.onBridgeReady()
                wx.config({
                    debug: false, // 开启调试模式,
                    appId: this.payParams.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                    timestamp: this.payParams.timestamp, // 必填，生成签名的时间戳
                    nonceStr: this.payParams.nonceStr, // 必填，生成签名的随机串
                    signature: this.payParams.paySign,// 必填，签名，见附录1
                    jsApiList: ['chooseWXPay']
                });
                // wx.chooseWXPay({
                //     appId: this.payParams.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                //     timestamp: this.payParams.timestamp, // 必填，生成签名的时间戳
                //     nonceStr: this.payParams.nonceStr, // 必填，生成签名的随机串
                //     signType: this.payParams.signType,
                //     package: this.payParams.packageValue,
                //     paySign: this.payParams.paySign,
                //     success: function (res) {
                //         console.log(res);
                //     }
                // })
            })
        },
        components: {
            [Radio.name]:
            Radio,
            [RadioGroup.name]:
            RadioGroup,
            [Dialog.name]:
            Dialog
        }
    }
    ;
</script>

<style lang="scss" scoped>
    .payment_group {
        margin-bottom: 10px;
    }

    .time_down {
        background-color: #fffeec;
        padding: 10px 15px;
    }

    .pay_submit {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .pay_way_group img {
        vertical-align: middle;
    }

    .pay_way_title {
        padding: 15px;
        background-color: #fff;
    }
</style>
